<template>
  <van-popup v-model:show="show" class="popup-box" style="height: 100%" position="right">
    <div class="page">
      <global-header :title="'注单详情'" @back="closed">
        <template #right>
          <div class="mr-[10px]">
            <RangeDatePopup v-model:date="searchParams.date" />
          </div>
        </template>
      </global-header>
      <main class="page-main !overflow-hidden page">
        <SearchArea
          :show-issue="true"
          @search="handleSearch"
          :show-name="false"
          :show-status="false"
        />
        <div class="page-main" ref="scrollRef">
          <div class="">
            <scroll-list
              v-model:loading="state.loading"
              v-model:refresh="state.refresh"
              :finished="state.finished"
              :length="list.length"
              @load="load"
            >
              <template v-for="item in list">
                <ul class="text-[#888] mb-2 bg-white px-[20px]">
                  <li class="flex justify-between items-center py-[10px]">
                    <div>游戏</div>
                    <div>{{ item.LotteryName }}</div>
                  </li>
                  <li class="flex justify-between items-center py-[10px]">
                    <div>用户名</div>
                    <div>{{ item.UserName || "--" }}</div>
                  </li>
                  <li class="flex justify-between items-center py-[10px]">
                    <div>备注</div>
                    <div>{{ item.Note || "--" }}</div>
                  </li>
                  <li class="flex justify-between items-center py-[10px]">
                    <div>玩法</div>
                    <div>{{ item.Cat2 || "--" }}</div>
                  </li>
                  <li class="flex justify-between items-center py-[10px]">
                    <div>下注内容</div>
                    <div>{{ item.Cat3 || "--" }}</div>
                  </li>

                  <li class="flex justify-between items-center py-[10px]">
                    <div>下注金额</div>
                    <div>{{ formatCurrency(item.TotalAmount) }}</div>
                  </li>
                  <li class="flex justify-between items-center py-[10px]">
                    <div>下注时间</div>
                    <div>{{ formatDate(item.CreatedAt) }}</div>
                  </li>
                  <li class="flex justify-between items-center py-[10px]">
                    <div>开奖结果</div>
                    <template v-if="item.LuckCode">
                      <template v-if="item.CategoryId == GameCategory.lhc">
                        <div>
                          <lhc-ball
                            class="!mr-[4px]"
                            :num="num"
                            :key="i"
                            v-for="(num, i) in formatNum(item)"
                          />
                        </div>
                      </template>
                      <template v-if="item.CategoryId == GameCategory.pcdd">
                        <div class="flex items-center justify-center">
                          <pcdd-ball class="!ml-[4px]" :num="formatNum(item)?.[0]" />
                          <pcdd-ball class="!ml-[4px]" :num="formatNum(item)?.[1]" />
                          <pcdd-ball class="!ml-[4px]" :num="formatNum(item)?.[2]" />
                          <span class="mx-[4px]">+</span>
                          <pcdd-ball :num="formatCount(item)" />
                        </div>
                      </template>
                      <template v-if="item.CategoryId == GameCategory.sc">
                        <div>
                          <sc-ball
                            class="!mr-[2px]"
                            :num="num"
                            :key="i"
                            v-for="(num, i) in formatNum(item)"
                          />
                        </div>
                      </template>
                      <template v-if="item.CategoryId == GameCategory.ssc">
                        <div>
                          <ssc-ball
                            class="!mr-[4px]"
                            :num="num"
                            :key="i"
                            v-for="(num, i) in formatNum(item)"
                          />
                        </div>
                      </template>
                      <template v-if="item.CategoryId == GameCategory.ydh">
                        <div>
                          <ydh-ball
                            class="!mr-[4px]"
                            :num="num"
                            :key="i"
                            v-for="(num, i) in formatNum(item)"
                          />
                        </div>
                      </template>
                    </template>
                    <template v-else>
                      <div>--</div>
                    </template>
                  </li>
                  <li class="flex justify-between items-center py-[10px]">
                    <div>输赢</div>
                    <div>{{ formatCurrency(item.WinAmount) }}</div>
                  </li>
                </ul>
              </template>
            </scroll-list>
          </div>
        </div>
      </main>
    </div>
  </van-popup>
</template>
<script lang="ts" setup>
import moment from "moment";
import { reqReportUserOrderDetail } from "@/api/report";
import SearchArea from "../search-area.vue";
import { useList } from "@/hooks/useList";
import { formatCurrency, formatDate } from "@/utils/common";
import { GameCategory } from "@/enums";

const searchParams = reactive({
  Issue: "",
  LotteryId: -1,
  date: <Date[]>[moment().toDate(), moment().toDate()],
  UserId: ""
});
const show = ref(false);

provide("searchParams", searchParams);

const getParams = () => {
  const params: any = {};
  params.UserId = searchParams.UserId;
  if (searchParams.Issue) {
    params.Issue = searchParams.Issue;
  }
  if (searchParams.LotteryId && searchParams.LotteryId != -1) {
    params.LotteryId = searchParams.LotteryId;
  }
  if (searchParams.date) {
    params.StartDate = moment(searchParams.date[0]).format("YYYY-MM-DD 00:00:00");
    params.EndDate = moment(searchParams.date[1]).format("YYYY-MM-DD 23:59:59");
  }
  return params;
};

// 获取列表
const { scrollRef, state, list, getData, search, load } = useList<any, any>(
  reqReportUserOrderDetail,
  getParams
);

const handleSearch = () => {
  search();
};

const closed = () => {
  show.value = false;
};

const open = (item: any) => {
  searchParams.UserId = item?.UserId;
  show.value = true;
  getData();
};

const formatNum = (row: ReportUserDetailMo) => {
  return row.LuckCode.split(",").map(Number);
};

const formatCount = (row: ReportUserDetailMo) => {
  return row.LuckCode.split(",")
    .map(Number)
    .reduce((a, b) => a + b, 0);
};

watch(
  () => searchParams.date,
  () => {
    nextTick(handleSearch);
  }
);

defineExpose({
  closed,
  open
});
</script>
